<!DOCTYPE html>
<html>
	<head>
		{load href="__STATIC__/bootstrap-3.3.7/css/bootstrap.min.css" /}
	    {js href="__JS__/jquery-3.3.1.min.js"}
	    {js href="__STATIC__/bootstrap-3.3.7/js/bootstrap.min.js"}
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			$(function(){
				$(".truename").click(function(){
					var id=$(this).attr("data-id");
					
					$.post("{:url('ajaxGetInfo')}",{id:id},function(data){
						$("#modal-truename").text(data.truename);
						$("#modal-stuno").text(data.stuno);
						$("#modal-college").text(data.college);
						$("#modal-idnum").text(data.idnum);
						$("#myModal").modal('show');
					});
					
				});
			});
		</script>
	</head>
	<body>
		<center><h2>欢迎进入后台管理页面</h2></center>
		<br>
{include file="admin/header" /}
		<table class="table table-striped">
		  <caption>详细数据:</caption>
		  <thead>
		    <tr>
		      <th>序号</th>
		      <th>姓名</th>
		      <th>身份证号</th>
		      <th>学号</th>
		    </tr>
		  </thead>
		  <tbody>
		  	{volist name='info' id="vo"}
		    <tr>
		      <td>{$i+($nowpage-1)*10}</td>
		      <td class="truename" data-id="{$vo.id}">{$vo.truename}</td>
		      <td>{$vo.idnum}</td>
		      <td>{$vo.stuno}</td>
		    </tr>
		    {/volist}
		  </tbody>
		  
		</table>
		<div class="text-center">
			{$info->render()}
		</div>
		
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel"><span id="modal-truename"></span>的详细信息如下：</h4>
            </div>
            <div class="modal-body">
            	<p>学号:<span id="modal-stuno"></span></p>
            	<p>所在学院:<span id="modal-college"></span></p>
            	<p>身份证号:<span id="modal-idnum"></span></p>	
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
	</body>
</html>
